<template>
	<view class="">
		<view class="bgw">
			<view class="blank20"></view>
			<view class="flex justify-between">
				<template v-for="col in table">
					<view :style="col.style">
						<view class="" v-if="col.key == 'date'">
							<text class="ml15">
								{{detail.date | filterDate}}
							</text>
						</view>
						<view class="flex" style="justify-content: center;" v-else-if="col.key == 'note'">
							<view class="icon-btn" :class="show?'active':''" @click="toggle()">
							
								<u-icon :name="show?'arrow-up':'arrow-down'" :color="show?'#ffffff':'#999999'"
									size="14"></u-icon>
							</view>
						</view>
						<view class="text-center" v-else-if="col.isRatio">
							{{detail[col.key] | formatPrice}}%
						</view>
						<view class="text-center" v-else>
							{{detail[col.key] | formatPrice}}
						</view>
					</view>
				</template>
			</view>
			<view class="blank20"></view>
			
			<view v-show="show">
				<view class="" v-for="(v,i) in detail.childs" @click="reportDetail(v)">
					<u-line dashed></u-line>
					<view class="blank10"></view>
					<view class="flex justify-between">
						<template v-for="col in table">
							<view :style="col.style">
								<view class="text-center" v-if="col.key == 'date'">
									{{v.cost_center_id[1]}}
								</view>
								<view class="flex" style="justify-content: center;" v-else-if="col.key == 'note'">
									<u-icon name="arrow-right" color="#999999" size="12"></u-icon>
								</view>
								<view class="text-center" v-else-if="col.isRatio">
									{{v[col.key] | formatPrice}}%
								</view>
								<view class="text-center" v-else>
									{{v[col.key] | formatPrice}}
								</view>
							</view>
						</template>
					</view>
					<view class="blank10"></view>
				</view>
			</view>
		</view>
		
		<view class="blank20"></view>
		<!-- <u-line dashed></u-line> -->
	</view>
</template>

<script>
	export default {
		name: "sale-item",
		props: {
			detail: Object,
			table:Array
		},
		data() {
			return {
				// id: this.detail.id,
				show: false,
				qty: [],
				price: [],
				picker_range: [
					['早餐', '午餐', '晚餐'],
					['快餐', '商务餐']
				],
				picker_value: [0, 0],
			};
		},
		watch: {
			detail: {
				handler(newVal, oldVal) {
					this.show = false;
					this.showTimeObj = {};
				},
				immediate: false,
				deep: true
			}
		},
		filters: {

		},
		computed: {

		},
		methods: {
			reportDetail(v){
				let date = v.date;
				let cost_center_id = v.cost_center_id[0];
				let cost_center_id_name = v.cost_center_id[1];
				this.nav('/reportDetail/reportDetail?date=' + date + '&cost_center_id='+cost_center_id +'&cost_center_id_name='+cost_center_id_name);
			},
			bind_picker_change(e) {
				let value = e.detail.value;
				this.picker_value = value;
				// console.log(this.picker_range);
				this.y_m = this.picker_range[0][value[0]] + '-' + this.picker_range[1][value[1]];

			},
			qty_change() {

			},
			price_change() {

			},

			toggle(time_i) {

				// this.show.show = i;
				if (typeof time_i == 'undefined') {
					this.show = !this.show;
					this.$forceUpdate();
					return;
				}
				this.showTimeObj[time_i] = !this.showTimeObj[time_i];
				this.$forceUpdate();
			},
		}

	}
</script>

<style>

</style>